<template>
    <div>
        <div class="time" style="margin-top:50px">
            <div style="margin-left:5px">{{ date | formatDateTime }}</div>
            <div>
                <el-radio-group v-model="radio" size="mini">
                    <el-radio-button label="一般行业"></el-radio-button>
                    <el-radio-button label="高危行业"></el-radio-button>
                    <el-radio-button label="所有"></el-radio-button>
                </el-radio-group>
            </div>
        </div>
        <!-- 中间路由 -->
        <div class="content">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-for="(item, index) in tabList" :key="index" :name="item.name">
                    <span slot="label">{{ item.label
                    }}<el-badge :value="item.value" :max="10" style="margin-top: -10px"></el-badge> </span>
                    <!-- 表格显示 -->
                    <router-view></router-view>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 底部 -->
        <div class="tail">
            <el-tabs v-model="active">
                <el-tab-pane label="服务跨度" name="Span">
                    <Span></Span>
                </el-tab-pane>
                <el-tab-pane label="成效分布" name="distribution">
                    <Distribution></Distribution>
                </el-tab-pane>
            </el-tabs>
        </div>

    </div>
</template>

<script>
import Span from "../parts/span.vue";
import Distribution from "../parts/distribution.vue";

export default {
    components: {
        Distribution,
        Span
    },

    data() {
        return {
            date: new Date(),
            radio: "所有",
            activeName: "0",
            active: "Span",
            tabList: [
                { label: "待接单", value: 99, name: "0" },
                { label: "待预约", value: "", name: "1" },
                { label: "报告初审", value: 99, name: "2" },
                { label: "结算对账", value: "", name: "3" },
                { label: "专家注册审核", value: "", name: "4" },
                { label: "质量协同", value: 99, name: "5" },
                { label: "重大隐患审批", value: "", name: "6" },
                { label: "重大隐患未整改提醒", value: "", name: "7" },
                { label: "专家解禁审核", value: 99, name: "8" },
                { label: "任务转派", value: 99, name: "9" },
            ],
        };
    },
    filters: {
        formatDateTime(value) {
            let date = new Date(value);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? "0" + MM : MM;
            let d = date.getDate();
            d = d < 10 ? "0" + d : d;
            let h = date.getHours();
            h = h < 10 ? "0" + h : h;
            let m = date.getMinutes();
            m = m < 10 ? "0" + m : m;
            let s = date.getSeconds();
            s = s < 10 ? "0" + s : s;
            return y + "年" + MM + "月" + d + "日" + h + ":" + m + ":" + s;
        }
    },
    created() {
        formatDateTime(value)


    },
    mounted() {
        // var that = this;
        // this.timer = setInterval(() => {
        //     that.date = new Date(); //修改数据date
        // }, 1000);

    },
    watch: {
        $route(to, from) {
            // 判断跳转的路径是否你要监听的路径，我这里为 '/search'
            if (to.path == "/0") {
                // 通过路径获取新的 keywords 值
                let param = to.query.keywords;
                // 通过新的参数值获取新的数据
                // this.getdata(param);
                console.log("index.watch", this.param);
            }
        }
    },
    methods: {
        // handleClick() {
        //     //this.$router.push()("/Workbench/index/" + tab)
        //     console.log(123456,)
        // }
        // handleClick(tab) {
        //     this.$router.push({ path: "/Workbench/index/" + tab.name });
        //     this.$emit("handleClick", tab);
        // },
        handleClick(tab, event) {
            this.$router.push("/Workbench/index/" + tab.name);
        }

    },
    computed: {},
}
</script>
<style >
.time {
    font-size: 16px;
    line-height: 30px;
    color: rgb(102, 102, 102);
    display: flex;
    justify-content: space-between;
}

.content {
    margin: 20px 0;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 6px rgb(15 86 179 / 10%);
}

.el-tabs {
    width: 98%;
    margin: auto;
}

.el-tabs__item {
    font-size: 15px;
}

.tail {
    margin: 20px 0;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 6px rgb(15 86 179 / 10%);
}
</style>